<template>
  <div>
    <dt-modal-info ref="info" title="顾问霸屏神器推广详情" :width="1000">
      <dt-grid ref="table" :onFetch="onFetch" :height="500" slot="bottom">
        <div class="flex btn-content" slot="btn">
          <Button type="primary" @click="exportFun" style="margin-right: 8px">导出</Button>
        </div>
      </dt-grid>
    </dt-modal-info>
    <preview-image :images="preViewImg" :showIndex="showIndex" ref="preViewImage"></preview-image>
  </div>
</template>
<script>
  import columnOpt from '../opt/detailColumns'
  import detailOpt from '../opt/detailOpt'
  import apiMgr from '../opt/index'

  export default {
    data() {
      return {
        info: {},
        showIndex: 0,
        preViewImg: [],
        exportParams: {},
        totalNum: 0
      }
    },
    methods: {
      show(data) {
        console.log('zhk ~ file: detail.vue:31 ~ show ~ data:', data)
        this.info = data
        this.$refs.info.show(new detailOpt(), this.info)
        this.$refs.table.init(this, new columnOpt(this))
        this.$refs.table.fetch()
      },
      onFetch(data) {
        let params = {
          ...data,
          buildingId: this.info.buildingId,
          roleId: this.info.roleId,
          userId: this.info.userId,
          startDate: this.info.startDate,
          endDate: this.info.endDate
        }
        this.exportParams = params
        return apiMgr.getAdviserShortArticle(params).then((res) => {
          this.totalNum = res.length
          return res
        })
      },
      exportFun() {
        apiMgr.exportAdviserShortArticle(this.exportParams)
      },
      lookImg(val) {
        this.preViewImg = val
        this.$refs.preViewImage.show()
      }
    }
  }
</script>
<style scoped lang="scss"></style>
